<%-- 
    Document   : mainboard
    Created on : 2016-2-19, 1:14:58
    Author     : Administrator
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>首页</title>

        <!-- Bootstrap -->
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="reveal/reveal.css">	
        <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">

        <!-- http://amazeui.org/css/icon 这个框架也不错 好实用 -->
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style type="text/css">
            .big-link {color: #06f; }
        </style>
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
        <script src="reveal/jquery.reveal.js"></script>
        <script src="guava.js"></script>
        <script type="text/javascript">
            var country_id = -1;
            var pinpai_id = -1;
            var country_name = "";
            var pinpai_name = "";
            var xilie_name = "";
            var pailiang_name = "";
            var nianfen_name = "";
            $(document).ready(function () {
                $('a[class=big-link]').click(function (e) {
                    //alert("on");
                    e.preventDefault();
                    var modalLocation = $(this).attr('data-reveal-id');
                    $('#' + modalLocation).reveal($(this).data());
                });
                var caryears = $("#caryears option");
                caryears.click(function () {
                    //alert($(this).val()+$(this).html());
                    //pinpai_id = $(this).val();
                    // $(hidden_input_name).val(pinpai_id);
                    $("#yearsstate").html("已选择 " + $(this).val() + "--" + $(this).html());
                    nianfen_name = $(this).html();
                    if (pailiang_name != "" && nianfen_name != "") {
                        //alert("can search");
                        getbaojia();
                    } else {
                        alert("前面还有没选择的参数，请按顺序选择");
                    }
                });
                $("#add_baojia_btn").click(function () {
                    //alert("what");
                    $.get("car/add_baojia", {country_name: country_name, pinpai_name: pinpai_name,
                        xilie_name: xilie_name, pailiang_name: pailiang_name, nianfen_name: nianfen_name, baojia: $("#baojia_id_input").val(), url: $("#baojia_URL_input").val()},
                            function (req) {
                                alert("添加成功");
                                location.reload();
                            });
                });
                $.get("car/get_country", null,
                        function (req) {
                            //成功时的回调方法
                            var opttt = "<table class='table table-striped'>";
                            for (var i = 0; i < req.length; i++)
                            {
                                opttt = opttt + '<tr><td class=country_item id="' + req[i].id + '">' + req[i].countryname
                                        + '</td> <td style="font-size:9px">'
                                        + '(<a href="javascript:country_update(\'countrybox\',' + req[i].id + ')">Edit</a> | '
                                        + '<a href="javascript:country_del(' + req[i].id + ')">Del</a>)</td></tr>';
                            }
                            opttt = opttt + "</table>";
                            $("#country_select").html(opttt);

                            var sso = $("#country_select .country_item");
                            sso.click(function () {
//                                alert($(this).val()+$(this).html());
                                country_id = $(this).attr('id');
                                $("#country_id_input").val(country_id);
                                $("#countrystate").html("已选择 " + $(this).attr('id') + "--" + $(this).html());
                                country_name = $(this).html();
                                showpinpai("#pinpai_select", "#pinpaistate", "#cartype_id_input");
                            });

                            $("#pinpai_btn").click(function () {
                                if (country_id == -1) {
                                    alert("请选择国家");
                                } else {
                                    pumpbox('pinpai');
                                }
                            });
                        });

            });
            function showpinpai(selectid, statename, hidden_input_name) {
//                alert("s");
                $.get("car/get_pinpai", {country_id: country_id},
                        function (req) {
//                            var opttt = "";
//                            for (var i = 0; i < req.length; i++)
//                            {
//                                opttt = opttt + '<option value="' + req[i].id + '">' + req[i].pinpai + '</option>';
//
//                            }
                            var opttt = "<table class='table table-striped'>";
                            for (var i = 0; i < req.length; i++)
                            {
                                opttt = opttt + '<tr><td class=pinpai_item id="' + req[i].id + '">' + req[i].pinpai
                                        + '</td> <td style="font-size:9px">'
                                        + '(<a href="javascript:pinpai_update(\'pinpaibox\',' + req[i].id + ')">Edit</a> | '
                                        + '<a href="javascript:pinpai_del(' + req[i].id + ')">Del</a>)</td></tr>';
                            }
                            opttt = opttt + "</table>";
                            $(selectid).html(opttt);

                            var sso = $("#pinpai_select .pinpai_item");
                            sso.click(function () {
                                //alert($(this).val()+$(this).html());
                                pinpai_id = $(this).attr('id');
                                $(hidden_input_name).val(pinpai_id);
                                $(statename).html("已选择 " + $(this).attr('id') + "--" + $(this).html());
                                pinpai_name = $(this).html();
                                cartype("#cartype_select", "#cartypestate", "#pailiang_id_input");
                            });

                        }
                );
            }

            function cartype(selectid, statename, hidden_input_name) {
//                alert("s");
                $.get("car/get_cartype", {farther_id: pinpai_id},
                        function (req) {
//                            var opttt = "";
//                            for (var i = 0; i < req.length; i++)
//                            {
//                                opttt = opttt + '<option value="' + req[i].id + '">' + req[i].carType + '</option>';
//
//                            }
                            var opttt = "<table class='table table-striped'>";
                            for (var i = 0; i < req.length; i++)
                            {
                                opttt = opttt + '<tr><td class=cartype_item id="' + req[i].id + '">' + req[i].carType
                                        + '</td> <td style="font-size:9px">'
                                        + '(<a href="javascript:cartype_update(\'cartypebox\',' + req[i].id + ')">Edit</a> | '
                                        + '<a href="javascript:cartype_del(' + req[i].id + ')">Del</a>|'
                                        + '<a href='+req[i].baojiaUrlInput+'><img src="image/shop3.png" alt="shop" width=15px height=15px>)</a></td></tr>';
                            }
                            opttt = opttt + "</table>";
                            $(selectid).html(opttt);

                            var sso = $(".cartype_item");
                            sso.click(function () {
                                //alert($(this).val()+$(this).html());
                                pinpai_id = $(this).attr('id');
                                //console.log(hidden_input_name);
                                $(hidden_input_name).val(pinpai_id);
                                $(statename).html("已选择 " + $(this).attr('id') + "--" + $(this).html());
                                var vname = "pailiang";
                                xilie_name = $(this).html();
                                //pailiang("#" + vname + "_select", "#" + vname + "state", "#" + vname + "_id_input");
                            });

                        }
                );
            }




            $("#cartype_btn").click(function () {
                if ($("#country_id_input").val() == "") {
                    alert("请选择国家");
                }
            });
        </script>
    </head>
    <body>
        <div class="container">
            <jsp:include page="top.jsp"></jsp:include>

            <div class="row">
                <div class="col-md-2">
                    <div>国家（<a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade">添加</a>）</div>
                    <div id="country">
                        <div name="country_select" id="country_select" size="10">

                        </div>
                    </div>
                    <div id="countrystate"></div>
                </div>
                <div class="col-md-2">
                    <div>品牌（<a href="#" id="pinpai_btn">添加</a>）
                    </div>
                    <div>
                        <div name="pinpai_select" id="pinpai_select" size="10">

                        </div>
                    </div>
                    <div id="pinpaistate"></div>
                </div>
                <div class="col-md-2">
                    <div>系列型号（<a href="#" class="big-link" data-reveal-id="cartype" data-animation="fade" id="cartype_btn">添加</a>）
                    </div>
                    <div>
                        <div name="cartype_select" id="cartype_select" size="10">

                        </div>
                    </div>
                    <div id="cartypestate"></div>
                </div>
                <!--
                <div class="col-md-2">
                    <div>排量（<a href="#" class="big-link" data-reveal-id="pailiang" data-animation="fade" id="pailiang_btn">添加</a>）
                    </div>
                    <div>
                        <div name="pailiang_select" id="pailiang_select" size="10">

                        </div>
                    </div>
                    <div id="pailiangstate"></div>
                </div>
                <div class="col-md-2">
                    <div>年份</div>
                    <div>
                        <select name="caryears" size="10" id="caryears">
                            <option value="1">三年车</option>
                            <option value="2">四年车</option>
                            <option value="3">五年车</option>
                            <option value="4">六年车</option>
                            <option value="5">七年车</option>
                            <option value="6">八年车</option>
                        </select>
                    </div>
                    <div id="yearsstate"></div>
                </div>
                <div class="col-md-2">
                    <div>报价（<a href="#" class="big-link" data-reveal-id="baojia" data-animation="fade" id="baojia_btn">添加</a>）
                    </div>
                    <div>
                        <div name="baojia_select" id="baojia_select" size="10">

                        </div>
                    </div>
                    <div id="yearsstate"></div>
                </div>
                -->
            </div>
        </div>

        <div id="myModal" class="reveal-modal">
            <form action="car/add_country" method="post">
                国家：<input name="countrynameString"/><br/>
                <button type="submit">提交</button>
            </form>
        </div>
        <div id="countrybox" class="reveal-modal">

            国家：<input name="countryname" id="countryname_id"/><br/>
            <button type="submit" onClick="country_edit()">提交</button>

        </div>    
        <div id="pinpai" class="reveal-modal">
            <form action="car/add_pinpai" method="post">
                品牌：<input name="pinpai"/><br/>
                <input name="country_id" type="hidden" id="country_id_input"/><br/>

                <button type="submit">提交</button>
            </form>
        </div>
        <div id="pinpaibox" class="reveal-modal">
            品牌：<input name="pinpaibox_name" id="pinpaibox_name"/><br/>
                <input name="id" type="hidden" id="id"/><br/>
                <button type="submit" onClick="pinpai_edit()">提交</button>
        </div>
            
        <div id="cartype" class="reveal-modal">
            <form action="car/add_cartype" method="post">
                型号：<input name="cartype"/><br/>
                <input name="cartype_id" type="hidden" id="cartype_id_input"/><br/>
                商城地址：<input name="baojia_URL_input" id="baojia_URL_input"/><br/>
                <button type="submit">提交</button>
            </form>
        </div>
        <div id="cartypebox" class="reveal-modal">
                型号：<input name="cartype" id="cartypename"/><br/>
                <input name="cartype_id" type="hidden" id="cartype_id_input"/><br/>
                商城地址：<input name="baojia_URL_input" id="baojia_URL_input_box"/><br/>
                <button type="submit" onClick="cartype_edit()">提交</button>
        </div>
        <div id="pailiang" class="reveal-modal">
            <form action="car/add_pailiang" method="post">
                排量：<input name="pailiang"/><br/>
                <input name="pailiang_id_input" type="hidden" id="pailiang_id_input"/><br/>

                <button type="submit">提交</button>
            </form>
        </div>
        <div id="years" class="reveal-modal">
            <form action="car/add_pailiang" method="post">

                <select name="guava" size="10" id="guava">
                    <option value="1">三年车</option>
                    <option value="2">四年车</option>
                    <option value="3">五年车</option>
                    <option value="4">六年车</option>
                    <option value="5">七年车</option>
                    <option value="6">八年车</option>
                </select>
                <input name="pailiang_id_input" type="hidden" id="pailiang_id_input"/><br/>

                <button type="submit">提交</button>
            </form>
        </div>
        <div id="baojia" class="reveal-modal">
            <p>该项还没有报价请提交</p>
            报价：<input name="baojia_id_input" id="baojia_id_input"/><br/>
            <input name="baojia_URL_input" id="baojia_URL_input" hidden="true" value="http://www.youzhibao.com"/><br/>
            <button type="submit" id="add_baojia_btn">提交</button>

        </div>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>
